Clojure Scriptを使ってみる

中村修太

2011.07.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Clojure Scriptとは

先日、Clojure Scriptという技術が発表されました。 Clojure Scriptとは「Clojureで書くことができるJavaScript」です。 Coffee Scriptと同じように、Clojureで記述したファイルをコンパイルしてjsファイルに書き出します。 Clojure自体よくわからない人もいらっしゃるかと思いますので、順番に説明していきます。

Clojureとは？

みなさんはClojure(クロージャー)という言語をご存知でしょうか？ Clojureとは、JVM上で動作するLISP系の言語です。最近はHerokuでサポートされたりして、知名度があがりつつある言語です。 Clojure言語自体の説明については、Clojure公式サイト※1や、Clojure入門記事※2などを参照してみてください。

Google Closureとの関係

Clojure言語はGoolgeが提供しているClosure Library/Compilerと名前がよく似ていますが、まったくの別物です。前者はJVM上で動くプログラミング言語、後者はJavaScriptのライブラリおよびツールです。しかし、Clojure ScriptはClosure Library/Compilerに依存している(コンパイルやオプティマイザ時に使用)ので、少々ややこしい状態になっています。 ClojureとClosureを混同しないように注意してください。

Clojure Scriptを動かしてみる

ではClojure Scriptを実際に動かしてみましょう。本記事での動作確認環境は下記の通りです。

- OS : MacOS X 10.6.8
- Git : 1.7.6
- Java : 1.6.0_26

github※4からClojure Scriptをcloneしてきて、初期化スクリプトを実行します。

$ git clone git://github.com/clojure/clojurescript.git
$ cd clojurescript
$ script/bootstrap

bootstrapコマンドを実行すると、Clojure本体やClosure　Libraryなど、必要なものを取得してくれます。

bootstrapの実行が終了したら、動作確認をしてみましょう。まずはREPLの確認です。

$./script/repl
Clojure 1.3.0-beta1
user=>

bootstrapで取得されたClojureのREPLが起動します。 REPLを終了したら、次はClojure ScriptのREPLを確認します。

$./script/repljs 
#'user/jse
"Type: " :cljs/quit " to quit"
ClojureScript:cljs.user>

この２つの起動を確認したら、次は環境変数の設定を行います。

Clojure ScriptのrootディレクトリをCLOJURESCRIPT_HOME環境変数に設定します。

$ export CLOJURESCRIPT_HOME=/path/your/clojurescript
$ export PATH=$PATH:$CLOJURESCRIPT_HOME/bin

pathに追加したら、確認してみましょう。

$ cljsc 
Usage: cljsc <file-or-dir>
       cljsc <file-or-dir> {:optimizations :advanced}

cljscコマンドが認識されていればOKです。

では、Clojure Scriptを用いて簡単なサンプルを作成してみましょう。 JQueryをClojure Scriptから呼び出し、クリックでdiv要素の値を変更するサンプルを作成します。まずはJavaScriptに変換される、Clojureファイルを作成します。

;jquerytest.cljs
(ns jquerytest.core)
(def jquery (js* "$"))

;ボタンクリック時の関数
(defn clickBtn
	  []
	  (-> (jquery "#text") 
	  	  (.html "Hello Clojure Script!")))

;htmlファイルよみこみ時に実行.
;ボタンのクリックイベントに関数をセット.
(jquery
   (fn []
     (-> (jquery "#btn")
         (.click clickBtn))))

Clojure Scriptのファイルは拡張子をcljsにします。 htmlのロード時にクリックイベントをセットし、ボタンがクリックされるとdiv要素に対してテキストを変更しています。

では、作成したファイルをjsファイルにコンパイルしましょう。

$ cljsc jquerytest.cljs > jquerytest.js

同じディレクトリに、jsファイルとoutディレクトリができているはずです。そしてjsファイルを使用するjquerytest.htmlファイルも作成します。

<html>
  <head>
  <script type="text/javascript" src="out/goog/base.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquerytest.js"></script>
  <script type="text/javascript">
    goog.require("jquerytest.core");
  </script>
  </head>
  <body>
   <div id="text">Click Me.</div>
   </br>
   <input type="button" id="btn"  value="execute jquery" />
  </body>
</html>

JQuer本体と、コンパイルしたjsファイル、あとはclosureのファイル読み込んでモジュールをロードしています。

htmlファイルをブラウザで開いてみてください。ボタンを押下するとテキストが変更されます。プログラムの詳細内容については、 Clojure Script Quick Start※3を参照してください。

ClojureからJQueryを使用してフロントサイドのプログラミングを行ってみました。フロントだけでなく、Clojure Scriptはnode.jsにも対応していますので、サーバサイドもClojure Scriptで実装することが可能です。今後はこういった特定言語からJavaScriptへコンパイルするようなアプローチがもっと出てきそうですね。